<template>
    <view class="container1">
        <uv-gap height="20rpx"></uv-gap>
        <!-- 单位信息头部 -->
        <view class="header">
            <view class="logo-container">
                <view class="unit-info ml-3">
                    <text class="unit-name font-bold text-lg">湖南省自然资源调查所</text>
                    <text class="service-area text-gray-500 text-sm">服务地点：隆回县全境</text>
                </view>
            </view>
            <view class="unit-desc p-3 bg-gray-50 rounded-lg mt-3">
                <text
                    class="text-sm">湖南省自然资源调查所是湖南省地质院下属公益二类地质事业单位，承担全省自然资源基础调查、变更调查、动态监测和分析评价等工作，为地质灾害防治提供专业技术支撑。</text>
            </view>
        </view>
        <!-- 服务内容板块 -->
        <view class="service-section mt-4">
            <view class="section-title">
                <text class="title-text font-bold">技术服务内容</text>
                <view class="underline"></view>
            </view>

            <view class="service-list mt-3">
                <view class="service-item flex p-3 border-b border-gray-100" v-for="(item, index) in serviceItems"
                    :key="index">
                    <view
                        class="service-icon bg-primary/10 text-primary rounded-full w-8 h-8 flex items-center justify-center">
                        <text class="iconfont" :class="item.icon"></text>
                    </view>
                    <view class="service-content ml-3">
                        <text class="service-title font-medium">{{ item.title }}</text>
                        <text class="service-desc text-gray-500 text-sm block mt-1">{{ item.desc }}</text>
                    </view>
                </view>
            </view>
            <view class="service-list mt-3">
                <view class="service-item flex p-3 border-b border-gray-100" v-for="(item, index) in serviceItems1"
                    :key="index" v-show="showAllPersonnel1">
                    <view
                        class="service-icon bg-primary/10 text-primary rounded-full w-8 h-8 flex items-center justify-center">
                        <text class="iconfont" :class="item.icon"></text>
                    </view>
                    <view class="service-content ml-3">
                        <text class="service-title font-medium">{{ item.title }}</text>
                        <text class="service-desc text-gray-500 text-sm block mt-1">{{ item.desc }}</text>
                    </view>
                </view>
            </view>
            <view class="see-more text-center text-primary py-2 text-sm"
                @click="showAllPersonnel1 = !showAllPersonnel1">
                查看全部内容 <text class="iconfont icon-right ml-1"></text>
            </view>
        </view>

        <!-- 主要人员板块 -->
        <view class="personnel-section mt-4">
            <view class="section-title">
                <text class="title-text font-bold">主要技术人员</text>
                <view class="underline"></view>
            </view>

            <view class="personnel-list mt-3">
                <view class="personnel-item flex p-3 border-b border-gray-100" v-for="(person, index) in personnelList"
                    :key="index">
                    <!-- <view
						class="avatar bg-gray-200 rounded-full w-12 h-12 flex items-center justify-center overflow-hidden">
						<text class="text-gray-500 text-xl">{{ person.name.charAt(0) }}</text>
					</view> -->
                    <view class="person-info ml-3 flex-1">
                        <view class="flex justify-between">
                            <text class="person-name font-medium">{{ person.name }}</text>
                            <text class="person-title text-sm text-primary">{{ person.title }}</text>
                        </view>
                        <text class="person-unit text-gray-500 text-sm">{{ person.unit }}</text>
                        <text
                            class="person-remark text-xs bg-gray-100 text-gray-600 mt-1 inline-block px-2 py-0.5 rounded"
                            v-if="person.remark">{{ person.remark }}</text>

                    </view>

                </view>
                <view class="personnel-item flex p-3 border-b border-gray-100" v-for="(person, index) in personnelList1"
                    v-show="showAllPersonnel">
                    <view class="person-info ml-3 flex-1">
                        <view class="flex justify-between">
                            <text class="person-name font-medium">{{ person.name }}</text>
                            <text class="person-title text-sm text-primary">{{ person.title }}</text>
                        </view>
                        <text class="person-unit text-gray-500 text-sm">{{ person.unit }}</text>
                        <text
                            class="person-remark text-xs bg-gray-100 text-gray-600 mt-1 inline-block px-2 py-0.5 rounded"
                            v-if="person.remark">{{ person.remark }}</text>
                    </view>
                </view>
            </view>

            <view class="see-more text-center text-primary py-2 text-sm" @click="showAllPersonnel = !showAllPersonnel">
                查看全部人员 <text class="iconfont icon-right ml-1"></text>
            </view>
        </view>

        <!-- 设备资源板块 -->
        <view class="equipment-section mt-4">
            <view class="section-title">
                <text class="title-text font-bold">投入设备资源</text>
                <view class="underline"></view>
            </view>

            <view class="equipment-list mt-3">
                <view class="equipment-item flex p-3 border-b border-gray-100" v-for="(equip, index) in equipmentList"
                    :key="index">
                    <view
                        class="equipment-icon bg-primary/10 text-primary rounded-full w-8 h-8 flex items-center justify-center">
                        <text class="iconfont" :class="equip.icon"></text>
                    </view>
                    <view class="equipment-info ml-3 flex-1">
                        <view class="flex justify-between">
                            <text class="equipment-name font-medium">{{ equip.name }}</text>
                            <text class="equipment-count text-gray-500 text-sm">数量：{{ equip.count }}台</text>
                        </view>
                        <text class="equipment-desc text-gray-500 text-sm" v-if="equip.remark">{{ equip.remark }}</text>
                    </view>
                </view>
            </view>
        </view>
        <uv-gap height="80rpx"></uv-gap>
        <!-- 快速功能按钮 -->
        <!-- <view class="quick-actions mt-6 mb-16">
			<view class="action-item flex flex-col items-center" @click="handleEmergency">
				<view class="action-icon bg-red-500 text-white rounded-full w-14 h-14 flex items-center justify-center">
					<text class="iconfont icon-emergency text-xl"></text>
				</view>
				<text class="action-text text-sm mt-2">应急处置</text>
			</view>

			<view class="action-item flex flex-col items-center" @click="handleReport">
				<view
					class="action-icon bg-orange-500 text-white rounded-full w-14 h-14 flex items-center justify-center">
					<text class="iconfont icon-report text-xl"></text>
				</view>
				<text class="action-text text-sm mt-2">灾情上报</text>
			</view>

			<view class="action-item flex flex-col items-center" @click="handleConsult">
				<view
					class="action-icon bg-green-500 text-white rounded-full w-14 h-14 flex items-center justify-center">
					<text class="iconfont icon-consult text-xl"></text>
				</view>
				<text class="action-text text-sm mt-2">技术咨询</text>
			</view>

			<view class="action-item flex flex-col items-center" @click="handleTraining">
				<view
					class="action-icon bg-blue-500 text-white rounded-full w-14 h-14 flex items-center justify-center">
					<text class="iconfont icon-training text-xl"></text>
				</view>
				<text class="action-text text-sm mt-2">培训服务</text>
			</view>
		</view> -->

        <!-- 联系我们弹窗 -->
        <!-- <view class="modal-mask" v-if="showContactModal" @click="showContactModal = false">
			<view class="modal-content" @click.stop>
				<view class="modal-header flex justify-between items-center pb-2 border-b">
					<text class="modal-title font-bold">联系我们</text>
					<text class="iconfont icon-close" @click="showContactModal = false"></text>
				</view>
				<view class="modal-body mt-4">
					<view class="contact-item flex items-center py-2">
						<text class="iconfont icon-phone text-primary w-8"></text>
						<text class="contact-info">0731-8888XXXX</text>
					</view>
					<view class="contact-item flex items-center py-2">
						<text class="iconfont icon-email text-primary w-8"></text>
						<text class="contact-info">hunan_zzc@example.com</text>
					</view>
					<view class="contact-item flex items-center py-2">
						<text class="iconfont icon-address text-primary w-8"></text>
						<text class="contact-info">湖南省长沙市XX区XX路XX号</text>
					</view>
				</view>
				<view class="modal-footer mt-6">
					<button class="call-btn bg-primary text-white rounded-full py-2 w-full" @click="makeCall">
						<text class="iconfont icon-phone mr-1"></text> 立即拨打
					</button>
				</view>
			</view>
		</view> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 服务内容列表
            serviceItems: [
                {
                    icon: 'icon-dailywork',
                    title: '日常防治与能力建设',
                    desc: '地质灾害调查核查、防灾知识宣传培训、应急指挥和综合防治信息维护等'
                },
                {
                    icon: 'icon-inspection',
                    title: '汛前汛期工作指导',
                    desc: '指导并全程参与汛前和汛期地质灾害排查、巡查、群测群防、应急演练等'
                },
                {
                    icon: 'icon-emergency',
                    title: '应急调查与处置',
                    desc: '负责全县突发地质灾害应急调查与处置、灾情险情风险和损失评估工作'
                },
            ],
            serviceItems1: [
                {
                    icon: 'icon-housecheck',
                    title: '切坡建房调查',
                    desc: '指导并参与全县切坡建房调查及隐患排查，提前发现风险，开展监测预警'
                },
                {
                    icon: 'icon-research',
                    title: '科研与技术推广',
                    desc: '负责地质灾害防治科学研究、新技术新方法新产品应用推广工作'
                },
                {
                    icon: 'icon-other',
                    title: '其他相关工作',
                    desc: '提供地质灾害治理项目方案及资金估算等其他技术支撑服务'
                }
            ],

            // 主要人员列表（前5名）
            personnelList: [
                {
                    name: '段九龄',
                    unit: '湖南省自然资源调查所水环中心',
                    title: '高工',
                    remark: '总体负责'
                },
                {
                    name: '肖永辉',
                    unit: '湖南省自然资源调查所水环中心',
                    title: '高工',
                    remark: '常驻'
                },
                {
                    name: '刘志华',
                    unit: '湖南省自然资源调查所水环中心',
                    title: '高工',
                    remark: '应急调查'
                },
                {
                    name: '郭志刚',
                    unit: '湖南省自然资源调查所水环中心',
                    title: '高工',
                    remark: '点面双控负责'
                },
                {
                    name: '黄杰军',
                    unit: '湖南省自然资源调查所水环中心',
                    title: '高工',
                    remark: '勘查设计'
                }
            ],
            personnelList1: [
                {
                    name: '何  良',
                    unit: '湖南省自然资源调查所水环中心',
                    title: '高工',
                    remark: '勘查设计'
                },
                {
                    name: '李文峰',
                    unit: '湖南省自然资源调查所水环中心',
                    title: '工程师',
                    remark: '常驻'
                },
                {
                    name: '胡弘毅',
                    unit: '湖南省自然资源调查所水环中心',
                    title: '工程师',
                    remark: '微治理'
                },
                {
                    name: '刘  璠',
                    unit: '湖南省自然资源调查所水环中心',
                    title: '助理工程师',
                    remark: '微治理'
                },
                {
                    name: '刘劲涛',
                    unit: '湖南省自然资源调查所水环中心',
                    title: '助理工程师',
                    remark: '应急调查'
                }
            ],

            // 设备资源列表
            equipmentList: [
                {
                    icon: 'icon-computer',
                    name: '电脑',
                    count: 2,
                    remark: '笔记本'
                },
                {
                    icon: 'icon-printer',
                    name: '打印机',
                    count: 1
                },
                {
                    icon: 'icon-drone',
                    name: '无人机',
                    count: 1
                }
            ],

            // 弹窗控制
            showContactModal: false,
            showAllPersonnel: false,
            showAllPersonnel1: false
        };
    },
    methods: {
        // 应急处置
        handleEmergency() {
            uni.showToast({
                title: '正在联系应急小组...',
                icon: 'none',
                duration: 2000
            });
            // 实际应用中可跳转至应急处置页面或直接拨打应急电话
        },

        // 灾情上报
        handleReport() {
            uni.navigateTo({
                url: '/pages/report/report'
            });
        },

        // 技术咨询
        handleConsult() {
            uni.navigateTo({
                url: '/pages/consult/consult'
            });
        },

        // 培训服务
        handleTraining() {
            uni.navigateTo({
                url: '/pages/training/training'
            });
        },

        // 拨打电话
        makeCall() {
            uni.makePhoneCall({
                phoneNumber: '0731-8888XXXX',
                fail: (err) => {
                    console.log('拨打电话失败：', err);
                }
            });
            this.showContactModal = false;
        }
    }
};
</script>

<style scoped>
.container1 {
    background-color: #f6f7f9;
    min-height: 100%;
    padding: 0 20rpx;
}

/* 导航栏样式 */
.navbar {
    height: 44px;
    line-height: 44px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.navbar-content {
    padding: 0 16px;
}

.title {
    font-size: 18px;
    font-weight: bold;
}

.contact-btn {
    display: flex;
    align-items: center;
    font-size: 14px;
}

/* 头部信息样式 */
.header {
    padding: 20rpx 20rpx;
    background: #fff;
    /* margin-top: 140rpx; */
    border-radius: 10rpx;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    width: 48px;
    height: 48px;
}

.unit-name {
    font-size: 16px;
}

.service-area {
    display: block;
    margin-top: 2px;
}

.unit-desc {
    font-size: 14px;
    line-height: 1.5;
}

/* 通用板块标题样式 */
.section-title {
    display: flex;
    align-items: center;
}

.title-text {
    font-size: 16px;
}

.underline {
    flex: 1;
    height: 1px;
    background-color: #eee;
    margin-left: 10px;
}

/* 服务内容样式 */
.service-section {
    padding: 20rpx 20rpx;
    background: #fff;
    border-radius: 10rpx;
}

.service-item {
    align-items: center;
}

.service-content {
    flex: 1;
}

.service-title {
    font-size: 15px;
}

.service-desc {
    line-height: 1.4;
}

/* 人员信息样式 */
.personnel-section {
    padding: 20rpx 20rpx;
    background: #fff;
    border-radius: 10rpx;
}

.personnel-item {
    align-items: center;
}

.person-info {
    line-height: 1.5;
}

.person-unit {
    color: #666;
}

/* 设备资源样式 */
.equipment-section {
    padding: 20rpx 20rpx;
    background: #fff;
    border-radius: 10rpx;
}

.equipment-item {
    align-items: center;
}

/* 快速功能按钮样式 */
.quick-actions {
    display: flex;
    justify-content: space-around;
}

.action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 弹窗样式 */
.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    width: 80%;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
}

.modal-header {
    font-size: 18px;
}

.modal-body {
    font-size: 15px;
}

.contact-item {
    border-bottom: 1px solid #eee;
}

.contact-info {
    flex: 1;
}

.modal-footer {
    padding-top: 10px;
}

.call-btn {
    font-size: 16px;
}

/* 颜色定义 */
.bg-primary {
    background-color: #1e40af;
}

.text-primary {
    color: #1e40af;
}

.text-white {
    color: #ffffff;
}

.text-gray-500 {
    color: #888888;
}

.bg-gray-50 {
    background-color: #f9f9f9;
}

.bg-red-500 {
    background-color: #ef4444;
}

.bg-orange-500 {
    background-color: #f97316;
}

.bg-green-500 {
    background-color: #10b981;
}

.bg-blue-500 {
    background-color: #3b82f6;
}

/* 布局工具类 */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-1 {
    flex: 1;
}

.align-items-center {
    align-items: center;
}

.text-center {
    text-align: center;
}

/* 间距工具类 */
.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

.mt-6 {
    margin-top: 24px;
}

.mb-16 {
    margin-bottom: 64px;
}

.ml-1 {
    margin-left: 4px;
}

.ml-3 {
    margin-left: 0rpx;
}

.p-2 {
    padding: 8px;
}

.p-3 {
    padding: 12px;
}

.py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.py-0.5 {
    padding-top: 2px;
    padding-bottom: 2px;
}

.px-2 {
    padding-left: 8px;
    padding-right: 8px;
}

.pb-2 {
    padding-bottom: 8px;
}

/* 边框样式 */
.border-b {
    border-bottom-width: 1px;
}

.border-gray-100 {
    border-color: #f1f1f1;
}

/* 圆角样式 */
.rounded-lg {
    border-radius: 8px;
}

.rounded-full {
    border-radius: 50%;
}

/* 文本样式 */
.font-bold {
    font-weight: bold;
}

.font-medium {
    font-weight: 500;
}

.text-sm {
    font-size: 14px;
}

.text-xs {
    font-size: 12px;
}

.text-lg {
    font-size: 18px;
}

.text-xl {
    font-size: 20px;
}

.text-3xl {
    font-size: 30px;
}

.block {
    display: block;
}

.overflow-hidden {
    overflow: hidden;
}

/* 宽高样式 */
.w-8 {
    width: 32px;
}

.w-12 {
    width: 48px;
}

.w-14 {
    width: 56px;
}

.h-8 {
    height: 32px;
}

.h-12 {
    height: 48px;
}

.h-14 {
    height: 56px;
}

.w-full {
    width: 100%;
}

/* 定位样式 */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}
</style>